<template>
  <el-card style="width: 100%">
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <!-- 搜索框 -->
        <el-input
          :placeholder="$t('table.placeholder')"
          clearable
          v-model="querForm.search"
        ></el-input>
      </el-col>
      <!-- 搜索 -->
      <el-button type="primary" :icon="Search" @click="initGetList">{{
        $t("table.search")
      }}</el-button>
      <!-- 添加管理员 -->
      <el-button type="primary" @click="handlerDialogValue()">{{
        $t("admin.addAdmin")
      }}</el-button>
    </el-row>
    <!-- 列表 -->
    <el-table :data="tableData" border class="listTable">
      <!-- 动态生成表格列 -->
      <el-table-column
        v-for="option in tableOptions"
        :key="option.prop"
        :prop="option.prop"
        :label="option.label"
        :width="option.width"
      />
      <!-- 操作列，包含操作按钮 -->
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button-group>
            <el-button size="small" @click="handlerDialogValue(row)">
              <el-icon><View /></el-icon>
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="handlerDialogValue(row)"
            >
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-button size="small" type="danger" @click="delAdmin(row)">
              <el-icon><Delete /></el-icon>
            </el-button>
            <el-button size="small" type="warning" @click="openRoleDialog(row)">
              <el-icon><Setting /></el-icon>
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="querForm.page"
      v-model:page-size="querForm.pagesize"
      :page-sizes="[2, 5, 10, 15]"
      :small="false"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <Dialog
    v-model="dialogVisible"
    :dialogTitle="dialogTitle"
    v-if="dialogVisible"
    @initGetList="initGetList"
    :dialogTableValue="dialogTableValue"
  />
  <RoleDialog 
    v-model="roleDialogVisible"
    v-if="roleDialogVisible"
    @initGetList="initGetList"
    :admin="currentAdmin"
  />
</template>

<script setup>
import { ref } from "vue";
import {
  Delete,
  Edit,
  Search,
  Share,
  Setting,
  Upload,
} from "@element-plus/icons-vue";
import { getAdmins, deleteAdmin } from "@/api/admin";
import { ElMessage, ElMessageBox } from "element-plus";
import { options as tableOptions } from "./options";
import { useI18n } from "vue-i18n";
import Dialog from "./components/dialog.vue";
import { isNull } from "@/utils/filters";
import ActionButtons from "@/components/ActionButtons.vue";
import RoleDialog from './components/roleDialog.vue';

const i18n = useI18n();

const querForm = ref({
  search: "",
  sortBy: "adminName",
  ascending: true,
  page: 1,
  pageSize: 10,
});

const tableData = ref([]);
const total = ref(0);

const initGetList = async () => {
  const res = await getAdmins(querForm.value);

  total.value = res.data.total;
  tableData.value = res.data.data;
};
initGetList();
//
const handleSizeChange = (pagesize) => {
  querForm.value.page = 1;
  querForm.value.pageSize = pagesize;
  initGetList();
};

//
const handleCurrentChange = (pagenum) => {
  querForm.value.page = pagenum;
  initGetList();
};

const dialogVisible = ref(false);
const dialogTitle = ref("");
const dialogTableValue = ref({});

const handlerDialogValue = (row) => {
  if (isNull(row)) {
    dialogTitle.value = "添加管理员";
    dialogTableValue.value = {};
  } else {
    dialogTitle.value = "编辑管理员";
    dialogTableValue.value = JSON.parse(JSON.stringify(row));
  }
  dialogVisible.value = true;
};
const delAdmin = (row) => {
  ElMessageBox.confirm("dialog.deleteTitle", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      await deleteAdmin(row.adminId);

      ElMessage({
        type: "success",
        message: "删除完成",
      });
      initGetList();
    })
    .catch((e) => {
      ElMessage({
        type: "info",
        message: e.message,
      });
    });
};

const roleDialogVisible = ref(false);
const currentAdmin = ref(null);

const openRoleDialog = (row) => {
  currentAdmin.value = row;
  roleDialogVisible.value = true;
};
</script>
<style src="@/css/list.css"></style>

